<template>
    <div class="OnlineAuctionContent">
        <div class="OnlineAuctionNavBar">
            <van-nav-bar title="在线拍卖" :border="false"></van-nav-bar>
        </div>
        <div class="OnlineAuctionSwiper">
            <van-swipe @change="onChange" autoplay=3000>
                <van-swipe-item v-for="(swiper,i) in swiper" :key="i">
                    <img :src="swiper.pic">
                </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">
                    {{ current + 1 }}/{{swiper.length}}
                </div>
            </template>
          </van-swipe>
        </div>
        <div class="auctionTimeOut">
            <auctionTimeOut :auctionTimeOut="auctionGoods"></auctionTimeOut>
        </div>
    </div>
</template>

<script>
import auctionTimeOut from "../../components/auctionTimeOut"
import {shoppingService} from "@/api"
import {formatDate} from "../../components/formatDate"
export default {
    name:"onlineAuction",
    data(){
        return{
            current: 0,
            swiper:[],
            auctionGoods:[],
        }
    },
    created(){
        this.asgetSlideAdvers();
        this.asgetauctionList();
    },
    methods:{
         // 轮播图
        onChange(index) {
            this.current = index;
        },
    // 获取广告列表
    async asgetSlideAdvers() {
      const { data } = await shoppingService.getSlideAdvers(6);
      this.swiper = data;
    },
    // 商品拍卖列表
    async asgetauctionList(){
      const { data } = await shoppingService.getauctionList(1,10,4,0,1);
      console.log(data.list,"拍卖列表")
      this.auctionGoods = data.list;
    },
    // 时间戳转换
    formatDate(time) {
        time = this.auctionGoods.endTime*1000;
        let date = new Date(time);
        console.log(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm')
    },


},
     components:{
         auctionTimeOut,
     },
}
</script>

<style scoped>
    .OnlineAuctionContent{
        background-color: rgba(247,249,252,1);
    }
    .OnlineAuctionSwiper{
        margin-top: 15px;
        width: 100%;
        text-align: center;
    }
    .OnlineAuctionSwiper img{
        width: 95%;
        height: 155px;
    }
    .custom-indicator {
        position: absolute;
        right: 15px;
        bottom: 15px;
        padding: 2px 5px;
        font-size: 15px;
        background-color: #69413e;
        color: #fff;
        border-radius: 20px;
    }
</style>